<nz-breadcrumb style="margin:16px 0;">
  <nz-breadcrumb-item>{{'system.setup.breadcrumb' | translate}}</nz-breadcrumb-item>
</nz-breadcrumb>
<div style="background:#fff; padding: 24px; min-height: 280px;">
  <nz-tabset nzTabPosition="left" [nzSelectedIndex]="0">
    <nz-tab nzTitle="{{'system.setup.tabset.tab.邮箱设置' | translate}}" title="用来发送Email消息">
      <form nz-form [formGroup]="validateForm">
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="mailHost">{{'system.setup.label.发件服务器' | translate}}
          </nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input formControlName="mailHost" placeholder="如：smtp.163.com">
            <nz-form-explain *ngIf="validateForm.get('mailHost').dirty && validateForm.get('mailHost').errors">请填写发件服务器
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="mailFrom">{{'system.setup.label.发件邮箱' | translate}}
          </nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input formControlName="mailFrom" placeholder="如：test@163.com">
            <nz-form-explain *ngIf="validateForm.get('mailFrom').dirty && validateForm.get('mailFrom').errors">请填写发件邮箱
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="mailPwd">{{'system.setup.label.邮箱密码' | translate}}
          </nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input type="password" formControlName="mailPwd" placeholder="如：123456">
            <nz-form-explain *ngIf="validateForm.get('mailPwd').dirty && validateForm.get('mailPwd').errors">请填写邮箱密码
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="mailTo">{{'system.setup.label.收件邮箱' | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <textarea row="4" nz-input formControlName="mailTo"
              placeholder="如：my@163.com;my2@163.com;(多个邮箱用分号分隔)"></textarea>
            <nz-form-explain *ngIf="validateForm.get('mailTo').dirty && validateForm.get('mailTo').errors">请填写收件邮箱
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <div class="but-con">
            <button nz-button nzType="dashed" [nzLoading]="sendMailLoading" (click)="testMail()"
              title="测试邮件是否配置成功">{{'system.setup.button.测试' | translate}}</button>
            <button nz-button nzType="primary" (click)="handleOk()">{{'system.setup.button.确定' | translate}}</button>
          </div>
        </nz-form-item>
      </form>
    </nz-tab>

    <nz-tab nzTitle="{{'system.setup.tabset.tab.MQTT配置' | translate}}" title="用来发送MQTT消息">
      <form nz-form [formGroup]="mqttValidateForm">

        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="host">{{'system.setup.label.连接方式' | translate}}
          </nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <nz-radio-group formControlName="connectionMethod" [nzButtonStyle]="'solid'">
              <label nz-radio-button nzDisabled nzValue="1">TCP</label>
              <label nz-radio-button nzDisabled nzValue="2">TCP SSL</label>
              <label nz-radio-button nzValue="3">WebSocket</label>
              <label nz-radio-button nzValue="4">WebSocket SSL</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="host">{{'system.setup.label.主机地址' | translate}}
          </nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input formControlName="host" placeholder="如：test.mqtt.com">
            <nz-form-explain *ngIf="mqttValidateForm.get('host').dirty && mqttValidateForm.get('host').errors">
              请填写主机地址
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="port">{{'system.setup.label.端口' | translate}}
          </nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input formControlName="port" placeholder="如：443">
            <nz-form-explain *ngIf="mqttValidateForm.get('port').dirty && mqttValidateForm.get('port').errors">请填写端口
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="clientId">{{'system.setup.label.客户端ID' | translate}}
          </nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input formControlName="clientId" placeholder="如：mqtt_645abb6809">
            <nz-form-explain *ngIf="mqttValidateForm.get('clientId').dirty && mqttValidateForm.get('clientId').errors">
              请填写客户端ID
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="userName">{{'system.setup.label.用户名' | translate}}
          </nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input formControlName="userName" placeholder="如：username">
            <!-- <nz-form-explain *ngIf="validateForm.get('mailPwd').dirty && validateForm.get('mailPwd').errors">请填写用户名
            </nz-form-explain> -->
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="password">{{'system.setup.label.密码' | translate}}
          </nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input type="password" formControlName="password" placeholder="如：123456">
            <!-- <nz-form-explain *ngIf="validateForm.get('mailPwd').dirty && validateForm.get('mailPwd').errors">请填写密码
            </nz-form-explain> -->
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <div class="but-con mqtt-but">
            <!-- <button nz-button nzType="dashed" [nzLoading]="sendMailLoading" (click)="testMail()"
              title="测试邮件是否配置成功">{{'system.setup.button.测试' | translate}}</button> -->
            <button nz-button nzType="primary" (click)="saveMqttSet()">{{'system.setup.button.确定' | translate}}</button>
          </div>
        </nz-form-item>
      </form>
    </nz-tab>

    <nz-tab nzTitle="{{'system.setup.tabset.tab.RabbitMQ配置' | translate}}" title="用来发送RabbitMQ消息">
      <form nz-form [formGroup]="rabbitValidateForm">
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="rabbitHost">{{'system.setup.label.主机地址' | translate}}
          </nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input formControlName="rabbitHost" placeholder="如：test.rabbitmq.com">
            <nz-form-explain
              *ngIf="rabbitValidateForm.get('rabbitHost').dirty && rabbitValidateForm.get('rabbitHost').errors">
              请填写主机地址
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="rabbitPort">{{'system.setup.label.端口' | translate}}
          </nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input formControlName="rabbitPort" placeholder="如：5672">
            <nz-form-explain
              *ngIf="rabbitValidateForm.get('rabbitPort').dirty && rabbitValidateForm.get('rabbitPort').errors">请填写端口
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="rabbitUserName">{{'system.setup.label.用户名' | translate}}
          </nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input formControlName="rabbitUserName" placeholder="如：username">
            <!-- <nz-form-explain *ngIf="validateForm.get('mailPwd').dirty && validateForm.get('mailPwd').errors">请填写用户名
              </nz-form-explain> -->
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="rabbitPassword">{{'system.setup.label.密码' | translate}}
          </nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input type="rabbitPassword" formControlName="rabbitPassword" placeholder="如：123456">
            <!-- <nz-form-explain *ngIf="validateForm.get('mailPwd').dirty && validateForm.get('mailPwd').errors">请填写密码
              </nz-form-explain> -->
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <div class="but-con mqtt-but">
            <!-- <button nz-button nzType="dashed" [nzLoading]="sendMailLoading" (click)="testMail()"
                title="测试邮件是否配置成功">{{'system.setup.button.测试' | translate}}</button> -->
            <button nz-button nzType="primary" [nzLoading]="rabbitbutLoading"
              (click)="saveRabbitSet()">{{'system.setup.button.' +  rabbitbut | translate}}</button>
          </div>
        </nz-form-item>
      </form>
    </nz-tab>

    <nz-tab nzTitle="{{'system.setup.tabset.tab.刷新设置' | translate}}">
      <form nz-form>
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="projectName" title="时间单位秒">
            {{'system.setup.label.页面定时刷新时间' | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <nz-input-group nzAddOnBefore="" nzAddOnAfter="{{'system.setup.label.秒' | translate}}">
              <input nz-input id="name" name="name" [(ngModel)]="refreshValue" title="时间单位秒" placeholder="时间单位秒">
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <div class="but-con-refresh">
            <button nz-button nzType="primary" (click)="saverefresh()">{{'system.setup.button.确定' | translate}}</button>
          </div>
        </nz-form-item>
      </form>
    </nz-tab>
    <nz-tab nzTitle="{{'system.setup.tabset.tab.登录设置' | translate}}">
      <form nz-form>
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="projectName" title="登录口令">
            {{'system.setup.label.旧登录口令' | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input id="name" name="name" type="password" [(ngModel)]="oldPassword">
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="projectName" title="登录口令">
            {{'system.setup.label.新登录口令' | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input id="name" name="name" type="password" [(ngModel)]="newPassword">
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <div class="but-con-refresh">
            <button nz-button nzType="primary" (click)="seaveLogin()">{{'system.setup.button.确定' | translate}}</button>
          </div>
        </nz-form-item>
      </form>
    </nz-tab>
    <!-- <nz-tab nzTitle="其他">
      其他
    </nz-tab> -->
  </nz-tabset>
</div>